/**
 * 预览计划弹框
 * @param{Object} preview 预览modal对象
 * @param{Object} userInfo 人员信息
 * @param{Object} deviceInfo 设备信息
 * @param{Object} planInfo  计划基本信息
 * @param{String} basicTitle 计划基本信息的titel
 * @param{String} deviceTitle 设备信息的title
 * @param{String} userTitle 人员信息title
 * @param{Bool} isCheckUser 判断哪个模块的预览
 * @param{function} addList 提交审批的执行按钮
 * @param{Array} projectList 预置项目的列标
*/
import React from 'react';
import { Modal, Button } from 'antd';
import { connect } from 'dva';
import PlanBasicMessage from '../planBasicMessage';
import DeviceMessage from '../deviceMessage';
import MaintenanceMessage from '../maintenanceMessage';
import TitleLine from '../titleLine';
import ProjuctDes from '../projectDes';
import KeepAlive from 'react-activation'
import './index.styl';

function PreviewPlanModal({
  dispatch,
  preview,
  userInfo,
  deviceInfo,
  planInfo,
  basicTitle,
  deviceTitle,
  userTitle,
  isCheckUser,
  addList,
  projectList,
  commonAction: {catchObj}
}) {
  const { isShow, statusId } = preview;
  function cancelShow() {
    dispatch({
      type: 'preview/updateIsshow',
      payload: { isShow: false },
    });
  }
  return (
    <KeepAlive name="previewPlanModal" when={catchObj.previewPlanModal}>
      <div className="previewPlanModal">
        <Modal
          title="预览计划"
          visible={isShow}
          centered={true}
          className="previewModal"
          footer={null}
          onCancel={cancelShow}
          width='1133px'
        >
          <div className="previewModal-content">
            <div className="mes-basic">
              <PlanBasicMessage title={basicTitle} isCheckUser={isCheckUser} basicInfo={planInfo} />
            </div>
            <div className="mes-eqpe">
              <div className="mes-eqpe-eq">
                <DeviceMessage title={deviceTitle} deviceInfo={deviceInfo} diff={true}/>
              </div>
              <div className="mes-eqpe-pe">
                <MaintenanceMessage title={userTitle} maintenanceInfo={userInfo} />
              </div>
            </div>
            {isCheckUser ? null : (
              <div className="mes-project">
                <TitleLine title="保养项目信息" />
                {
                  projectList.length > 0 && projectList.map(item => {
                    return (
                      <ProjuctDes projectInfo={item} key={item.key} />
                    )
                  })
                }
              </div>
            )}
          </div>
          <div className="previewModal-footer">
            <Button className="blue-button" onClick={() => addList(statusId)}>
              提交审批
          </Button>
            <Button className="white-button" onClick={cancelShow}>取消</Button>
          </div>
        </Modal>
      </div>
    </KeepAlive>
  );
}

export default connect(({ preview, commonAction }) => ({
  preview, commonAction
}))(PreviewPlanModal);
